<div class="index_content">
	<div class="banner">
		<div class="container">
				<div class="leftBanner">
					{% partial 'index/index-left-top-banner' code="index-top-banner" %}
				</div>
				<!--<div class="rightBanner fr">
					{% partial 'index/index-right-top-banner' code="" %}

				</div>-->
		</div>
		<!-- index valentinesday enter -->
		{% set homeValentinesday = catalog.fetchAd('home-valentinesday-enter-pc').items %}
			{% if homeValentinesday %}
			{% for item in homeValentinesday %}
			<div class="container" style="margin: 50px auto;">
				<a href="{{ item.link }}" style="display: block;width: 100%;">
					<img src="{{ item.image.getPath() }}" alt="" style="max-width: 100%;">
				</a>
			</div>
		{% endfor %}
		{% endif %}
	</div>
	<div class="btn-opener open">
		<img class="closeImg" height="63" width="63" src="{{ 'assets/img/btn-features-close.png'|theme }}">
		<img class="openImg" height="63" width="63" src="{{ 'assets/img/btn-features-open.png'|theme }}">
	</div>
	<div class="recommend1">
		<div class="container">
			<div class="swiper-container indexTjFour_swiper">
				<div class="swiper-wrapper ">
					{% for item in catalog.fetchAd('pc-index-recommend-products_1').items %}
				    <div class="swiper-slide">
				    	<a href="{{ item.link }}">
				    		<span class="item-image"><img class="lazy" data-original="{{ item.image.getPath() }}" src="{{ item.image.getPath() }}" alt=""></span>
				    	</a>
				    </div>
				 	{% endfor %}

				</div>
			    <!--  -->
			    <div class="swiper-button-prev swiper-button-black"></div>
			    <div class="swiper-button-next swiper-button-black"></div>
			</div>

			<div class="btn-more" style="margin-top: 30px;">
				{% for item in catalog.fetchAd('pc-index-recommend-products_1-link').items %}
			 	<a href="{{ item.link }}" id=""><span>{{ item.name }}</span></a>
			 	{% endfor %}
			</div>
		</div>
	</div>

	<div class="recommend2">
		<div class="container">
			<h3 class="mb10"><img class="lazy mr-auto" data-original="{{ 'assets/img/hl-new-arrival.png'|theme }}" alt=""></h3>
			{% partial 'index/index-pro-banner2' code="pc-index-new-products" %}
			<div class="btn-more">
			 	<a href="/daily-new.html" id=""><span>新着アイテム一覧を見る</span></a>
			</div>
		</div>
	</div>

	<div class="recommend3">
		<div class="container">
			<div class="col-lg-12 rankLeft">
				<h3 class="mb10"><img class="lazy mr-auto" data-original="{{ 'assets/img/hl-ranking.png'|theme }}" alt=""></h3>
				{% partial 'index/index-pro-banner3' code="hot-sale-products" %}
				<div class="btn-more">
				 	<a href="/sale.html?rel=home" id=""><span>ランキングをもっと見る</span></a>
				</div>
			</div>
			<!--<div class="col-lg-4 rankRight">-->
				<!--<h2>HOT TOPICS</h2>-->
				<!--{% partial 'index/index-hot-topics' %}-->
			<!--</div>-->
		</div>
	</div>

	<div class="recommend4">
		<div class="container">
			<h2 class="mb15"></h2>
			<div class="swiper-container indexTjOne_swiper">
			   	{% partial 'index/index-pro-banner4' code="recommend-products" %}
			    <!--  -->
			    <div class="swiper-button-prev swiper-button-black"></div>
			    <div class="swiper-button-next swiper-button-black"></div>
			</div>
		</div>
	</div>
	<!--<div class="recommend5">-->
		<!--<div class="container">-->
			<!--<h2 class="mb15"><img class="lazy mr-auto" data-original="{{ 'assets/img/hl-coordinate.png'|theme }}" alt=""></h2>-->
			<!--{% partial 'index/index-pro-banner5' code="" %}-->
			<!--<div class="btn-more">-->
			 	<!--<a href="" id=""><span>コーディネート一覧を見る</span></a>-->
			<!--</div>-->
		<!--</div>-->
	<!--</div>-->
</div>